<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check='false'
        @load="onLoad"
        offset="50"
      >
        <ArticleItem v-for="(obj,index) in list"
        :key="index"
        :artObj="obj"
        @disLikeEV="dislikeFn"
        @reportEV="reportFn"
        @click.native="itemClickFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '../../../components/ArticleItem.vue'
import { getAllArticleList, dislikeArticleAPI, reportsArticleAPI } from '../../../api/index'
import { Notify } from 'vant'
// 问题1.网页刚打开,created里的请求和onLoad里的请求同时发送,请求的 都是最新的数据
// 而在onLoad中,2次一样的数据合并,数据重复,key重复
// 原因:van-list组件,组件挂载时,默认就会判定一次是否触底
// 第一页的数据也是网络请求回来的,标签先挂载了,数据回来更新DOM,所以标签没有高度
// 解决方案一:文档 immediate-check设置为false
// 解决方案二:onLoad函数开始判断数据为0直接返回
// 解决方案三:使用index
export default {
  data () {
    return {
      list: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 低部完成状态
      isLoading: false, // 顶部加载状态
      theTime: new Date().getTime()
    }
  },
  components: {
    ArticleItem
  },
  props: ['channelId'],
  async created () {
    // const res = await getAllArticleList({
    //   channel_id: this.channelId,
    //   timestamp: this.theTime
    // })
    // this.list = res.data.data.results
    // this.theTime = res.data.data.pre_timestamp
    // console.log(res)
    this.getArticleList()
    /*
      pre_timestamp
      下一段开头的那篇文章事件戳
      第一次系统时间(timestamp) -> 后台返回0-9的数据
      第二次(timestamp)-上一次pre_timestamp(代表告诉后,从指定的时间戳再往后找10个)
    */
  },
  methods: {
    async getArticleList () {
      // 异步更新数据
      const res = await getAllArticleList({
        channel_id: this.channelId,
        timestamp: this.theTime
      })
      this.list = [...this.list, ...res.data.data.results]
      this.theTime = res.data.data.pre_timestamp

      // 加载状态结束--否则一直是触底状态,不会再次触发
      this.loading = false
      // 数据全部加载完成
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }
      // 顶部加载状态改为false
      this.isLoading = false
    },
    async onLoad () {
      if (this.list === 0) {
        // 改组件的onLoad一触发loading自动切换为true
        this.loading = false
        return
      }
      // 异步更新数据
      this.getArticleList()
    },
    async onRefresh () {
      this.list = []
      this.theTime = new Date().getTime()
      // 目标:list数组清空,来一份新的数据
      this.getArticleList()
    },
    async dislikeFn (id) {
      await dislikeArticleAPI({
        artId: id
      })
      // res里面没有有效的信息，所以await往下放行，就证明请求和响应成功
      // console.log('aaa', res)
      Notify({
        type: 'success',
        message: '反馈成功'
      })
    },
    async reportFn (id, value) {
      await reportsArticleAPI({
        artId: id,
        type: value
      })
      Notify({
        type: 'success',
        message: '举报成功'
      })
    },
    // 文章单元格点击事件
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  }
}
</script>

<style>

</style>
